<template>
  <div class="box">
    <div class="top">
      <el-form label-width="80px">
        <el-form-item label="车辆类型">
          <el-select v-model="carData.truckTypeId" placeholder="请选择">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input v-model="carData.licensePlate" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="centre">
      <el-tabs type="card" @tab-click="tabClick">
        <el-tab-pane label="全部22" />
        <el-tab-pane label="可用11" />
        <el-tab-pane label="停用11" />
      </el-tabs>
    </div>
    <div class="newTemplate">
      <el-button type="primary" @click="isShow=true">新增车辆</el-button>
      <div class="bottom">
        <el-table
          stripe
          :data="carList"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{ background: '#f8faff' }"
        >
          <el-table-column
            label="序号"
            width="60"
            type="index"
            :index="(carData.page-1)*carData.pageSize+1"
          />
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="160"
          />
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
            width="156"
          />
          <el-table-column
            prop="driverNum"
            label="司机数量"
            width="156"
          />
          <el-table-column
            label="车辆状态"
            width="156"
          >
            <template v-slot="{row}">
              <el-button v-if="row.workStatus===1" type="text" style="color:#adbbff" class="dot">可用</el-button>
              <el-button v-else type="text" class="dots">停用</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
            width="235"
          />
          <el-table-column
            prop="allowableLoad"
            label="实载重量(T)"
            width="235"
          />
          <el-table-column
            prop="allowableVolume"
            label="实载体积(方)"
            width="180"
          />
          <el-table-column
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button type="text" style="color:#91bbff" @click="lookDetails(row.id)">查看详情</el-button>
              <el-button v-if="row.workStatus===1" type="text" @click="blockUp(row.id)">停用</el-button>
              <el-button v-else type="text" style="color:#91bbff" @click="enable(row.id)">启用</el-button>
              <el-button type="text" style="color:#91bbff" @click="configuration(row.id)">配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="carData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="carData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @current-change="changeCurrent"
            @size-change="changeSize"
          />
        </div>
      </div>
    </div>
    <!-- 添加车辆的对话框 -->
    <addCar :is-show.sync="isShow" @update="update" />
    <!-- 启用跟禁用对话框 -->
    <startEnd :id="id" ref="carForm" :visible.sync="visible" :title="title" />
    <!-- 配置司机 -->
    <dubbing :id="id" :driver.sync="driver" />
  </div>
</template>

<script>
import addCar from './components/addCar.vue'
import startEnd from './components/startEnd.vue'
import dubbing from './components/dubbing.vue'
import { getCarData, getCarList } from '@/api/truck'
export default {
  components: { addCar, startEnd, dubbing },
  data() {
    return {
      carData: {
        licensePlate: '', // 车牌号码
        page: 1, // 页码
        pageSize: 10, // 页数
        truckTypeId: '', // 车辆类型id
        workStatus: '' // 状态--状态 0：禁用 1：正常
      },
      counts: null, // 总页数，以前是total
      carList: [],
      list: [], // // 下拉车辆类型列表
      isShow: false, // 添加车辆的对话框
      visible: false, // 启用/禁用的对话框
      title: '车辆停用', // 启用/禁用的对话框的标题
      id: '',
      driver: false// 配置司机
    }
  },
  async created() {
    // 获取车辆分页数据
    await this.getCarData()
    // 获取车型列表
    const res = await getCarList()
    this.list = res.data
  },
  methods: {
    // 获取车辆分页数据
    async getCarData() {
      const res = await getCarData(this.carData)
      this.carData = res.data
      this.counts = Number(res.data.counts)// total要的是数字型
      this.carList = res.data.items
    },
    // 分页功能
    // 给this身上设置variable变量控制切换分页下面的分页也要根据当前的数据变化
    async changeCurrent(page) {
      this.carData.page = page
      await delete this.carData.items
      if (this.variable === 1) {
        this.getCarData()
        return
      }
      if (this.variable === 2) {
        this.carData.workStatus = 1
        this.getCarData()
        return
      }
      if (this.variable === 3) {
        this.carData.workStatus = 0
        this.getCarData()
        return
      }
      this.getCarData()
    },
    // 点击多少页会显示多少页
    async changeSize(pageSize) {
      this.carData.pageSize = pageSize
      await delete this.carData.items
      if (this.variable === 1) {
        this.getCarData()
        return
      }
      if (this.variable === 2) {
        this.carData.workStatus = 1
        this.getCarData()
        return
      }
      if (this.variable === 3) {
        this.carData.workStatus = 0
        this.getCarData()
        return
      }
      this.getCarData()
    },
    // 监听子组件传过来的事件
    update() {
      delete this.carData.items
      this.getCarData()
    },
    // 点击标签页切换
    async tabClick(e) {
      this.carData.page = 1
      await delete this.carData.items
      if (e.label === '全部22') {
        this.variable = 1
        await this.getCarData()
      }

      if (e.label === '可用11') {
        this.carData.workStatus = 1
        this.variable = 2
        await this.getCarData()
      }

      if (e.label === '停用11') {
        this.carData.workStatus = 0
        this.variable = 3
        await this.getCarData()
      }
    },
    // 模糊搜索
    async search() {
      this.carData.page = 1
      delete this.carData.items
      this.getCarData()
    },
    // 重置
    async reset() {
      delete this.carData.items
      this.carData.truckTypeId = ''
      this.carData.licensePlate = ''
      this.getCarData()
    },
    // 查看详情
    lookDetails(id) {
      this.$store.commit('user/SET_NAV_STATUS', true)
      this.$router.push(`/vehicle-detail/${id}`)
    },
    // 停用
    blockUp(id) {
      this.id = id
      this.visible = true
      this.title = '车辆停用'
    },
    // 启用
    enable(id) {
      this.id = id
      this.visible = true
      this.title = '车辆启用'
    },
    // 配置司机
    configuration(id) {
      this.driver = true
      this.id = id
    }

  }
}

</script>

<style lang="scss" scoped>
.box{
  display: flex;
  flex-flow: column;
  background-color: #f4f6f8;
  padding: 20px;
  .top{
    margin-top: 20px;
    height: 80px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .centre{
    margin-top: 30px;
    height: 40px;
    background-color: #fff;
  }
}
 .dot{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #1dc779;
    }
  }
 .dots{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      transform: translate(0,-50%);
      left: -2%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #dd001b;
    }
  }
.newTemplate{
  margin-top: 30px;
  padding: 28px;
  background-color: #fff;
}
::v-deep .el-table--scrollable-x .el-table__body-wrapper{
    overflow-x: hidden;
}
::v-deep .el-button--primary{
    margin-bottom: 20px;
}
::v-deep .el-form{
   display: flex;
   height: 40px;
   .el-input__inner{
    width: 410px;
   }
   .el-button{
    width: 90px;
   }
}
.block{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
